<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" >
    <el-table
            border
            :data="deptInfos"
            >
        <el-table-column
                prop="id"
                label="部门ID"
                >
        </el-table-column>
        <el-table-column
                prop="dname"
                label="部门名称"
                >
        </el-table-column>
        <el-table-column
                prop="dsname.state"
                label="部门状态"
                >
        </el-table-column>
        <el-table-column
                prop="docsname.state"
                label="诊断状态"
                >
        </el-table-column>
        <el-table-column
                prop=""
                label="部门详情"
                >
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-search" circle  @click="getDeptInfo(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="部门简介" :visible.sync="dialogFormVisible">
        <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item>
                <template slot="label">
                    部门id
                </template>
                {{getDept.id}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    部门名称
                </template>
                {{getDept.dname}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    部门状态
                </template>
                {{dsname}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    诊断状态
                </template>
                {{docsname}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    部门简介
                </template>
                {{getDept.dintro}}
            </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
        </div>
    </el-dialog>

</div>
<script>
    $.get("/demo/dept/queryDepts",function (backData) {
        haha.deptInfos = backData.data;
    });

    var haha = new Vue({
        el: "#app",
        data: {
            dsname:"",
            docsname:"",
            dialogFormVisible:false,
            deptInfos:[],
            getDept:{}
        },
        methods: {
            getDeptInfo(id){
                $.get("/demo/dept/getDept/"+id,function (backData) {
                    haha.getDept = backData.data;
                    haha.dsname = backData.data.dsname.state;
                    haha.docsname = backData.data.docsname.state;
                });
                haha.dialogFormVisible = true
            }
        }
    })
</script>
</body>
</html>